<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
	<!--引入layui  -->
	<link rel="stylesheet" href="layui/css/layui.css" media="all">
</head>
	<!--引入layui  -->
	<script src="layui/layui.js" charset="utf-8"></script>
<body>
	<!-- 查询条件DIV-->
	<div class="layui-form-item" style="margin-top: 10px;">
		<form class="layui-form" onsubmit="return false;">
			<label class="layui-form-mid">姓名:</label>
			<div class="layui-input-inline" style="width: 120px;">
				<input type="text" name="name" autocomplete="off" class="layui-input">
			</div>
			<label class="layui-form-mid">性别:</label>
			<div class="layui-input-inline" style="width: 200px;">
				<select name="gender">
					<option value="">--请选择--</option>
					<option value="男">男</option>
					<option value="女">女</option>
				</select>
			</div>
			<div class="layui-input-inline" style="width: 300px;">
				<button class="layui-btn" lay-submit="" lay-filter="search" id="search" data-type="reload"><i class="layui-icon">&#xe615;</i>搜索</button>
				<button class="layui-btn layui-btn-normal" type="reset" ><i class="layui-icon">&#xe666;</i>重置</button>
			</div>
		</form>
	</div>
	
	<!--定义数据表格table  -->
	<table class="layui-hide" id="proTable" lay-filter="filterTable"></table>
	<!-- 开关1（既能开也能关） -->
	<script type="text/html" id="switchBar1">
		<input type="checkbox" data-id="{{d.id}}" name="status" lay-filter="isLockSwitch" lay-skin="switch" lay-text="已锁定|未锁定" {{d.isLock=="1" ? "checked":""}}>
	</script>
	<script>
	/*定义好各种组件   */
	layui.use(['laydate','layer','form','table','tree','upload'], function() {
		var laydate = layui.laydate	//日期组件
			,layer = layui.layer	//弹层组件
			,form = layui.form		//表单组件
			,tree = layui.tree		//树形结构组件
			,upload = layui.upload  //上传组件
			,$= layui.jquery    	//jquery
			,table = layui.table;	//表格组件
			
		
		//使用表格组件，渲染表格，填充数据
	 	table.render({
			elem: '#proTable',	 				//表格的id		
			url: 'findUser.do',			//提交到后台的地址
			method: 'get', 						//请求方式
			even: true, 						//隔行变色			
			page: true,							//开启分页			
			toolbar: '#toolbarDemo', 			//开启头部工具栏
			title: '产品表', 					//表格名称		
			cols: [ //定义所有列的，第一列是复选框列，最后一列是操作列，中间的是数据列
				[{
					field: 'ck',   				//固定值，这一列是复选框
					fixed: 'left', 				//表示靠左固定（只有left和right两个值）
					type: 'checkbox', 			//表示复选框
					width: 100      			
				},{
					field: 'id',	//字段属性
					align:'center', //数据对齐
					width: 80,	    //宽度（可选）
					title: '编号',	//名称
					sort: true		//开启排序（可选）
				},{
					field: 'img',
					title: '头像',
					width: 100,	    //宽度（可选）
					templet:
						'<div><img src="{{d.img}}"></div>'
				},{
					field: 'name',
					width: 150,
					title: '姓名'
				},{
					field: 'gender',
					width: 120,
					title: '性别',
				},{
					field: 'birthday',
					width: 200,
					title: '生日',
				},{
					field: 'phone',
					width: 120,
					title: '手机号',
				},{
					field: 'accountBmikece',
					width: 120,
					title: '性别',
				},{
					field: 'gender',
					width: 120,
					title: '用户余额',
				},{
					field: 'isLock',
					title: '是否锁定',
					width: 120,
					toolbar:'#switchBar1'
				}]
			]
		});
		
			
	 	/*
			条件查询
		*/
	    form.on('submit(search)', function (data) {
	        var field = data.field;
	        //执行重载
	        table.reload('proTable', {
	            page: { curr: 1 },
	            where: field
	        });
	    }); 
		
		// 处理开关：点击时把信息传入到后台进行修改（isLockSwitch写对应开关的lay-filter值即可）
		  form.on('switch(isLockSwitch)', function (data) {
			  var id = $(this).attr('data-id');			//获得当前点击对象的id值
			  var valid = this.checked ? 'on' : 'off';	//获取到点击后的开关状态（on/off）
			  var x=data.elem.checked;					//获取到点击后的开关状态（true/false）
			  layer.open({
				  content: '确定要修改状态吗？'				//给用户的友好提示
				  ,btn: ['确定', '取消']
				  ,yes: function(index, layero){
					  data.elem.checked=x;
					  layer.close(index);
					  $.ajax({
						  type : "POST",
						  url : "updateUser.do",
						  data : {"id" : id , "valid" : valid},
						  success : function(res) {
							  if(res){
								  layer.msg("修改成功！");
							  }else{
								  layer.msg("修改失败！");
							  }
							  form.render();
						  },
						  error : function() {
						  }
					  });
				  }
				  ,btn2: function(index, layero){
					  //按钮【按钮二】的回调
					  data.elem.checked=!x;
					  form.render();
					  layer.close(index);
					  //return false 开启该代码可禁止点击该按钮关闭
				  }
				  ,cancel: function(){
					  //右上角关闭回调
					  data.elem.checked=!x;
					  form.render();
					  //return false 开启该代码可禁止点击该按钮关闭
				  }
			  });
			  form.render();
			  return false;
		  });
	});
	
	
	</script>

</body>
</html>